<template>
<!--  部门管理最大盒子-->
  <div class="department-all">
    <!--    头部最大盒子-->
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
        <!--        头部图片最大的盒子-->
        <div class="icons">
          <!--          权限图片-->
          <i class="iconfont icon-quanxian"></i>
        </div>
        <!--        头部标题-->
        <span class="icone">部门管理</span>
      </div>
    </el-row>

    <!--    菜单页面上方最大盒子-->
<!--    <div class="top-all">-->
<!--      <div class="top-one">-->
<!--        <div class="li-all">菜单名称：-->
<!--          <input class="input-all">-->
<!--        </div>-->
<!--        <div class="li-all-one">用户状态：-->
<!--          &lt;!&ndash;                上方选择框&ndash;&gt;-->
<!--          <el-select v-model="value" class="m-2" placeholder="">-->
<!--            <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </div>-->
<!--        &lt;!&ndash;          上方盒子里面的搜索、重置按钮&ndash;&gt;-->
<!--        <div class="button-all">-->
<!--          &lt;!&ndash;             上方搜索按钮&ndash;&gt;-->
<!--          <el-button class="button-one" type="primary" round><i class="iconfont icon-sousuo"></i>搜索</el-button>-->
<!--          &lt;!&ndash;              上方重置按钮&ndash;&gt;-->
<!--          <el-button class="button-one" type="warning" round><i class="iconfont icon-zhongzhi"></i>重置</el-button>-->

<!--        </div>-->

<!--      </div>-->

<!--    </div>-->
<!--    &lt;!&ndash;    页面下方最大盒子&ndash;&gt;-->
    <div class="bottom-all">
      <!--      下方上方按钮-->
      <div class="button-all">
        <!--            下方按钮大盒子-->
        <el-row class="iconfont-all">
          <!--              按钮小盒子-->
          <el-button class="iconfont-one1" type="primary" @click="insertMethod"><i class="iconfont icon-xinzeng"></i>新增</el-button>

        </el-row>
      </div>
      <!--      下方大表格-->
      <div>
        <el-table
            :data="d.tableData"
            :border="parentBorder"
            style="width: 100%"
            :header-cell-style="{
                               fontWeight:'normal',
                               fontSize:'14px',
                               color:'#909399',
                                background:'#EFF3F8',
                            }"
        >
          <el-table-column label="部门id" prop="departmentId"></el-table-column>
          <el-table-column label="部门名称" prop="departmentName" />
          <el-table-column label="备注" prop="depatmentContent" />
          <el-table-column label="状态" prop="name4" >
            <!--            表格里面的---显示按钮-->

            <template #default="scope">
              <el-switch v-model="scope.row.depatmentState"
                         :active-value="0"
                         :inactive-value="1"
              @change="deleteDepartment(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdTime" />
          <el-table-column label="操作" prop="name6" >
            <template #default="scope">
              <div class="butt-all" style="display: flex">
                <!--                      右下方表格里面的按钮-->
                <el-button class="table-buttom" type="primary" @click="updateDepartment(scope.row)"><i class="iconfont icon-tianxie"></i>编辑</el-button>

              </div>
            </template>

          </el-table-column>
        </el-table>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>
<DepartmentInsertModule :departmentData="departmentModule"></DepartmentInsertModule>
</template>

<script lang="ts" setup>

// 上方搜索、重置按钮
import {
  Check,
  Delete,
  Edit,
  Message,
  Star,
} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import DepartmentInsertModule from "../system/systemVue/departmentInsertModule.vue"

const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
//新增部门组件
onMounted(()=>{
  //返回所有可用部门
  departmentDataMethod();

})
//显示组件方法
const insertMethod =()=>{
  departmentModule.transition=0
  departmentModule.dialogVisible= true;
  departmentModule.departmentData ={
    departmentName:"",
    depatmentContent:"",

  };
}
//修改部门
const updateDepartment =(department)=>{
  departmentModule.transition=1;
  departmentModule.dialogVisible= true;
  departmentModule.departmentData = department;


}
//delete部门
const deleteDepartment =(departmentData)=>{
  console.log(departmentData.depatmentState)
  const url = "http://localhost:1688/department_con/updateDepartment"
  axios.put(url,departmentData).then(data=>{
    console.log(data,"修改成功")
  })
}
const departmentModule= reactive({
  dialogVisible:false,
  departmentData:{},
  transition:0, //默认新增  1 修改
})
//返回所有的部门
const departmentDataMethod = ()=>{
  const url = "http://localhost:1688/department_con/alldepartments";
  axios.get(url).then(data=>{
    var data2=data.data.data
    ALltableData.value = data2;//放入表格
    d.total = data.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
}
// 下方表格
const parentBorder = ref(false)
const childBorder = ref(false)

// 表格里面的显示开关
const value4 = ref(true)

// 表格里面的开关
const value2 = ref(true)

// 右下方表格全选
interface User {
  number:string
  date: string
  name: string
  address3: string
}




</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");
/*全局*/
*{
  padding: 0px;
  margin: 0px;
}
/*页面最大盒子*/
.system-all{
  height: 100%;
}
/*头部最大盒子*/
.search{
  border: 1px solid silver;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.el-row{
  padding: 5px 0px;
}

/deep/ .el-tabs__header {
  margin-bottom: 0px;
}
/*头部图片最大的盒子*/
.icons{
  width: 50px;
  height: 50px;
  background: dodgerblue;
  text-align: center;
  line-height: 50px;
  /*圆角*/
  border-radius: 40px;
  margin-left: 20px;
}
/*权限图片*/
.icon-quanxian {
  color: white;
  font-size: 24px;
  line-height: 50px;
}
/*头部标题*/
.icone{
  padding-left: 15px;
  line-height: 50px;
}
/*菜单页面上方最大盒子*/
.top-all{
  height: 60px;
  border: 1px solid silver;
}
.top-one{
  display: flex;
  height: 60px;
}
/*菜单名称上面的文字*/
.li-all{
  font-size: 14px;
  width: 265px;
  line-height: 60px;
  padding-left: 15px;
}
/*右上方input盒子*/
.input-all{
  height: 30px;
  border-radius: 4px;
  width: 180px;
  font-size: 14px;
  border: 1px solid silver;
}
/*菜单状态上面的文字*/
.li-all-one{
  font-size: 14px;
  width: 265px;
  height: 60px;
  padding-left: 15px;
  line-height: 60px;
}

/*右上方选择框*/
.m-2{
  width: 180px;
  height: 30px;
  margin-bottom: 5px;
  font-size: 14px;
}
/*上方盒子里面的搜索、重置按钮*/
.button-all{
  height: 60px;
  line-height: 60px;
}
/*页面下方最大盒子*/
.bottom-all{
  border: 1px solid silver;
  height: 540px;
}
/*右下方按钮最大盒子*/
.button-all{
  padding-left: 17px;
  border-bottom:1px solid silver ;
}
/*右下方按钮大盒子*/
.iconfont-all{
  padding-top: 10px;
}
/*按钮小盒子*/
.iconfont-one1{
  padding: 10px;
  background-color: #1C84C6;
}
/*表格里面的显示按钮*/
.button-one2{
  background-color: #1AB394;
  border-radius: 20px;
  padding: 15px;

}
/*按钮小盒子*/
.iconfont-one2{
  padding: 10px;
  background-color: #1AB394;
}
/*按钮小盒子*/
.iconfont-one3{
  padding: 10px;
  background-color: #23C6C8;
}
/*表格里面的---目录按钮*/
.button-one{
  padding: 15px;
}

/*表格里面的---菜单按钮*/
.button-one1{
  background-color: #1AB394;
  padding: 15px;
}
/*大表格的按钮*/
.table-buttom{
  padding: 10px;
}




</style>